<template>
    <div class="app-container">
        <div>
            我们想知道您现在的心情如何。请选择一个最能描述您当前情绪状态的选项。
        </div>

        <div class="wrap"> 
            <div :class="{ icon: true, selected: is_selected==1 }"><img class="img" src="../../icons/11.png" @click="handleZan(1)"></div>
            <div :class="{ icon: true, selected: is_selected==2 }"><img class="img" src="../../icons/22.png" @click="handleZan(2)"></div>
            <div :class="{ icon: true, selected: is_selected==3 }"><img class="img" src="../../icons/33.png" @click="handleZan(3)"></div>
            <div :class="{ icon: true, selected: is_selected==4 }"><img class="img" src="../../icons/44.png" @click="handleZan(4)"></div>
            <div :class="{ icon: true, selected: is_selected==5 }"><img class="img" src="../../icons/55.png" @click="handleZan(5)"></div>
        </div>
        <!-- 问答弹窗 -->
        <el-dialog title="问卷" :visible.sync="DialogVisible" width="400px" style="max-width: 100%;" center>
            <!-- <span>需要注意的是内容是默认不居中的</span> -->
            <div style="color: black; font-size: 16px; margin-bottom: 10px; font-weight: bold;">
                接下来，我们会做一个简单的注意力测试以确保您的实验完成质量，
                <strong>未通过测试会导致您无法获得奖励</strong>。您会看到10条新闻，请选出5条您刚才阅读过的新闻并在旁边打勾（不用点进去，只要是看过就行）
            </div>
            <div v-for="item, index in questions" :key="index" >
                <el-checkbox-group v-model="checked" style=" display: flex;flex-wrap: wrap;">
                    <el-checkbox :label="item.serial" style="margin-bottom: 5px;" >{{ item.title }}</el-checkbox>
                </el-checkbox-group>
            </div>
            <span slot="footer" class="dialog-footer">
            <!-- <el-button @click="DialogVisible = false">取 消</el-button> -->
            <el-button type="primary" @click="handleSubmit">提交问卷</el-button>
            </span>
        </el-dialog>
        
    </div>
  </template>
  
  <script>
    import { articleCurrentEmotion, articleCheckQuestion, articleCheckAnswer } from '@/api/news'
  export default {
    data() {
      return {
        DialogVisible: false,
        questions: [],
        checked: [],
        is_selected: ''
      }
    },
    mounted(){
    },
    methods: {
        //提交问卷
        async handleSubmit() {
            if(this.checked.length==5){
                this.is_selected = '';
                this.DialogVisible = false;
                let data = await articleCheckAnswer({articleList: this.checked})
                console.log(data.data, "===")
                sessionStorage.setItem('type', 'start')
                let { passed, time, userId, username } = data.data;
                if(passed){
                    this.$router.push(`/status?type=1&time=${time}&userId=${userId}&username=${username}`)
                }else{
                    this.$router.push(`/status?type=0&time=${time}&userId=${userId}&username=${username}`)
                }
                
            }else{
                this.$message.error({ message: '请选择5个标题' })
            }
        },
        //点击赞
        async handleZan(emotion){
            this.is_selected = emotion;
            await articleCurrentEmotion({ emotion, emotionType: 'start' });
            let type = sessionStorage.getItem('type');
            if(type =='start'){
                // 如果是登录进来的，填完直接跳转阅读
                this.is_selected = '';
                alert('开始阅读新闻')
                this.$router.replace({ path: '/', query: { t: Date.now() } })
            }else{
                // 如果是结束了，那么弹窗问卷
                this.getQuestion();
            }
            
        },
        //查询问卷内容
        async getQuestion() {
            let { data } = await articleCheckQuestion({})
            this.questions = data;
            this.checked = [];
            this.DialogVisible = true;
        },
    }
  }
  </script>
  
  <style scoped>
  ::v-deep .el-checkbox__label {
			vertical-align: text-top;
			white-space: normal;
			word-break: break-all;
			width: 330px;
		}
  .wrap {
    display: flex;
    .icon{
        flex: 1;
        margin-right: 10px;
        overflow: hidden;
        .img {
            width: 100%;
        }
    }
    .selected{
        border: 2px solid red;
    }
  }
  </style>
  
  